<template>
  <div key="id">
    <BtnGroup title="居中设置" :status="status[currentStatus]">
      <el-button-group class="">
        <el-button
          :class="{
            select: currentStatus === 0,
          }"
          @click="changePosition(0)"
        >
          <font-awesome-icon :icon="['fas', 'align-left']" />
        </el-button>
        <el-button
          :class="{
            select: currentStatus === 1,
          }"
          @click="changePosition(1)"
        >
          <font-awesome-icon :icon="['fas', 'align-center']" />
        </el-button>
      </el-button-group>
    </BtnGroup>
  </div>
</template>

<script setup lang="ts">
import BtnGroup from './components/BtnGroup.vue'
import type { VueComType } from '@/types'

const props = defineProps<{
  configKey: string
  id: string
  status: string[]
  currentStatus: number
  isShow: boolean
  editCom: VueComType
}>()
const updateStatus = inject('updateStatus') as Function

const changePosition = (pos: number) => {
  updateStatus(props.configKey, pos)
}
</script>

<style scoped></style>
